<template>
  <div>
    <el-card>
      <el-col :span="8" class="leftaside">
        <el-row class="btns">
          <el-button type="primary" @click="addDialogvisibled">新增</el-button>
          <el-button type="primary" @click="editClass">修改</el-button>
          <el-button type="primary" @click="deleteClass">删除</el-button>
          <el-button type="primary" @click="refresh">刷新</el-button>
        </el-row>
        <el-row style="border-bottom:none;">
          <!-- 树形控件 -->
          <!-- show-checkbox -->
          <!-- @check-change="handleCheckChange" -->
          <el-tree
            :data="getClassList"
            :props="defaultProps"
            node-key="goodClassId"
            ref="treeRef"
             @node-click="handleNodeClick"
            
          ></el-tree>
        </el-row>
      </el-col>
      <el-col :span="16" class="rightcontent">
        <el-row class="menuTitle" style="border-right:none;">
          <h1>分类详情</h1>
        </el-row>
        <el-row class="inputs">
          <el-form>
            <div class="menuInput">
              <el-form-item label="分类名称">
                <el-input v-model="detailformData.goodClassName"></el-input>
              </el-form-item>
              <el-form-item label="备注">
                <el-input v-model="detailformData.goodClassRemark"></el-input>
              </el-form-item>
            </div>
          </el-form>
        </el-row>
      </el-col>
    </el-card>
    <!-- 新增对话框区域 -->
    <el-dialog title="新增分类" :visible.sync="dialogVisible" width="30%" @close="FromClosed">
      <el-form :model="addformData" status-icon ref="addFormRef" :rules="addFormRules">
        <el-row style="border:none">
          <el-col>
            <el-form-item label="名称" prop="goodClassName">
              <el-input v-model="addformData.goodClassName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="border:none">
          <el-col>
            <el-form-item label="备注" prop="goodClassRemark">
              <el-input v-model="addformData.goodClassRemark"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogCanceld">取 消</el-button>
        <el-button type="primary" @click="addCommClass">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改会话框 -->
    <el-dialog title="修改分类" :visible.sync="editdialogVisible" width="30%" @close="editFromClosed">
      <el-form :model="editformData" status-icon ref="editFormRef" :rules="editFormRules">
        <el-row style="border:none">
          <!-- <el-col>
            <el-form-item label="商品分类编号">
              <el-input v-model="editformData.goodClassId"></el-input>
            </el-form-item>
          </el-col>-->
          <el-col>
            <el-form-item label="商品分类名称" prop="goodClassName">
              <el-input v-model="editformData.goodClassName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="border:none">
          <el-col>
            <el-form-item label="商品分类备注" prop="goodClassRemark">
              <el-input v-model="editformData.goodClassRemark"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editdialogCanceld">取 消</el-button>
        <el-button type="primary" @click="editCommClass">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import req from "@/api/comm-classift-manage.js";
export default {
  inject: ["reload"],
  name: "comm-classify-manage",
  data() {
    return {
      // 分类列表数据
      getClassList: [],
      defaultProps: {
        children: "sonList",
        label: "goodClassName"
      },

      // 设置新增对话框默认为隐藏
      dialogVisible: false,
      // 设置修改对话框默认隐藏
      editdialogVisible: false,
      // 新增会话框表格数据
      addformData: {},
      // 修改会话框表格数据
      editformData: {},
      // 商品分类详情
      detailformData:{},
      // 选择分类id
      classId: '',
      // 新增子节点id
      // sonclassId: [],
       // 新增表单验证
    addFormRules: {
      // 菜单名验证
      goodClassName: [
        { required: true, message: "请输入商品分类名称", trigger: "blur" },
      ],
      goodClassRemark: [
        { required: true, message: "请输入商品分类备注", trigger: "blur" },
      ],
    },
    // 修改商品验证
    editFormRules: {
      // 菜单名验证
      goodClassName: [
        { required: true, message: "请输入商品分类名称", trigger: "blur" },
      ],
      goodClassRemark: [
        { required: true, message: "请输入商品分类备注", trigger: "blur" },
      ],
    },
    };
  },
  mounted() {
    this.getlistGoodClass();
  },
  methods: {
   
    // 监听添加用户框的开关情况，并清除填写内容
    FromClosed() {
      this.$refs.addFormRef.resetFields();
    },
    // 监听修改用户框的开关情况，并清除填写内容
    editFromClosed() {
      this.$refs.editFormRef.resetFields();
    },
    // 获取每一个节点的id
    handleNodeClick(data) {
      console.log('id',data.goodClassId);
      this.classId=data.goodClassId
       req("getGoodClass", {
        goodClassId: this.classId
      }).then(data => {
        console.log(data);
        this.detailformData=data.data
      });
    },
    // 新增对话框显示
    addDialogvisibled() {
      this.dialogVisible = true;
    },
    // 新增商品分类
    addCommClass() {
      // 使用validate触发表单验证
      this.$refs.addFormRef.validate(async valid => {
        if (!valid) return;
        if (!this.classId) {
          req("addGoodClass", {
            ...this.addformData
            // parentId:this.sonclassId.length,
          }).then(data => {
            console.log('新增一级分类',data);
            if (data.code !== 0) {
              return this.$message.error(data.msg);
            } else {
              console.log(data);
              // 隐藏添加用户框
              this.dialogVisible = false;
              // 弹出提示框
              this.$message.success(data.msg);
              // 重新获取用户信息数据，从而刷新页面
              // this.returnMenuByRole();
              this.getlistGoodClass();
              // this.reload();
            }
          });
        } else {
          // console.log(this.sonclassId[0]);
          req("addGoodClass", {
            ...this.addformData,
            parentId: this.classId
          }).then(data => {
            console.log('新增二级分类',data);
            if (data.code !== 0) {
              return this.$message.error(data.msg);
            } else {
              console.log(data);
              // 隐藏添加用户框
              this.dialogVisible = false;
              // 弹出提示框
              this.$message.success(data.msg);
              // 重新获取用户信息数据，从而刷新页面
              // this.returnMenuByRole();
              this.getlistGoodClass();
              // this.reload();
            }
          });
        }
      });
    },
    // 确认修改商品分类
    editCommClass() {
       this.editformData.version = parseInt(this.editformData.version);
      // console.log(typeof this.editformData.version)
      // console.log(this.currentRow);
      this.$refs.editFormRef.validate(async valid => {
        if (!valid) return;
        req("updateGoodClass", {
          goodClassId: this.classId,
          ...this.editformData
        }).then(data => {
          console.log(data);
          if (data.code !== 0) {
            return this.$message.error(data.msg);
          } else {
            console.log(data);
            // 隐藏添加用户框
            this.editdialogVisible = false;
            // 弹出提示框
            this.$message.success(data.msg);
            // 重新获取用户信息数据，从而刷新页面
            this.getlistGoodClass();
            // this.returnMenuByRole();
            // this.reload();
          }
        });
      });
    },
    // 查询商品分类列表
    getlistGoodClass() {
      req("getlistGoodClass", {}).then(data => {
        console.log('商品分类列表',data);
        this.getClassList = data.data;
      });
    },
    // 修改分类
    editClass() {
      if(this.classId){
        this.editdialogVisible = true;
      console.log(this.classId);
      req("getGoodClass", {
        goodClassId: this.classId
      }).then(data => {
        console.log(data);
        this.editformData=data.data
      });
      }      
    },
    // 删除分类
    async deleteClass() {
      if(this.classId){
const confirmResult = await this.$confirm(
        "此操作将永久删除所选分类, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).catch(err => err);
      if (confirmResult !== "confirm") {
        return this.$message("已取消删除");
      } else {
        
          req("deleteGoodClass", {
            goodClassId: this.classId
          }).then(data => {
            console.log(data);
            if (data.code !== 0) {
              return this.$message.error(data.msg);
            } else if (data.code === 0) {
              console.log('删除成功')
              this.$message.success(data.msg);
              this.getlistGoodClass();
            }
          });
        

        // console.log(this.classId.join(','))
      }
      }
      
    },
    // 刷新
    refresh() {
      // this.reload();
      this.getlistGoodClass();
    },
    // 新增会话框取消
    dialogCanceld(){
      this.$refs.addFormRef.resetFields();
      this.dialogVisible=false
      // this.reload();
    },
    // 修改会话框取消
    editdialogCanceld(){
      console.log('取消按钮被点击了')
      this.$refs.editFormRef.resetFields();
      this.editdialogVisible=false
      // this.reload();
    }
  },
  components: {}
};
</script>

<style lang="scss" scoped>
// 设置输入框宽度
.el-input {
  width: 200px;
}
.menuInput {
  display: flex;
}
.el-form-item {
  display: flex;
  margin-left: 20px;
}
.tips {
  margin-left: 50px;
}
.menuTitle {
  margin-top: -17px;

  h1{
    transform: translateX(30%);
  }
}
.el-card {
  border: 1px solid #eee;
}
.el-row {
  border: 1px solid #eee;
}
.btns {
  height: 66px;
  margin-top: -17px;
  display: flex;
  align-items: center;
  transform: translateX(10%);
  border: none;
}
p {
  padding: 16px;
  margin-top: -1px;
  margin-bottom: 1px;
}
p:hover {
  background-color: rgba(236, 245, 255, 1);
}
.leftaside {
  margin-left: -20px;
  margin-top: -3px;
}
.rightcontent {
  margin-top: -3px;
  margin-right: -164px;
  /* margin-left: 20px; */
  width: 876px;
}
.inputs {
  height: 373px;
  border-right: none;
  border-bottom: none;
}
</style>
